<template>
  <div class="about">
    <h1 class="blue">This is an about page</h1>
    <p :class="$style.red">This should be red</p>
    <div>
      <p :class="{ [$style.red]: true }">Am I red?</p>
      <p :class="[$style.red, $style.bold]">Red and bold</p>
    </div>
    <p>{{ lessStyles.boldClass }}</p>
    <recursion :tree="tree"></recursion>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import styles from "../styles/about.module.css";
import lessStyles from "../styles/about.module.less";
import Recursion, { TreeType } from "../components/recursion.vue";

type StyleType = {
  [key: string]: string;
};

@Component({
  components: {
    Recursion,
  },
})
export default class About extends Vue {
  $style: StyleType | undefined;
  other: StyleType | undefined;
  styles: StyleType = styles;
  lessStyles: StyleType = lessStyles;
  tree: TreeType[] = [
    {
      title: "1-1",
      children: [
        {
          title: "2-1",
          children: [
            {
              title: "3-1",
            },
          ],
        },
      ],
    },
  ];

  private created() {
    console.log(this.other);
    console.log(this.$style);
    console.log(styles);
    console.log(lessStyles);
  }
}
</script>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

<style module="other">
/* 在 .vue 中可以定义不止一个 <style>，为了避免被覆盖，可以通过设置 module 属性来为它们定义注入后计算属性的名称 */
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

<style scoped>
.about .blue {
  color: #0ff;
}
.about .bg-blue {
  background: #0ff;
}
</style>
